			<div id="banner_image">
				
				
				<img class="img" src="" />
				<div id="image_frame">
					<div id="btn_left"></div>
					<div id="image_detail_link"></div>
					<div id="btn_right"></div>
				</div>				
				<div id="image_frame_title" style="display: none;">
					
				</div>
				<div style="clear:both"></div>
				
			</div>	
			<div id="image_frames">	
				<div id="image_frames_images">
					<?php foreach($news as $k=>$v){?>
					<div style="height: 150px;overflow:hidden;float:left;margin-left: 30px;margin-right: 12px;margin-top: 32px;">
					<img src="<?php echo $this->webroot.'uploaded/News/large/'.$v['News']['image']?>" width="294" title="image" alt="<?php echo $v['News']['title']?>"/>
					</div>
					<?php }?>
				</div>			
				<div id="content">
					<?php foreach($news as $k=>$v){?>
					<a href="<?php echo $this->Seo->link('/news/detail/'.$v['News']['id']);?>">
					<div id="frame<?php echo $k+1?>">
						<div id="frame_content">
							<font style="font-size:18px;margin-bottom:5px"><?php echo $v['News']['title']?></font><br /><br />
							<?php echo $this->Common->cutText($v['News']['description'])?>
						</div>
					</div>
					</a>
					<?php }?>
					
				</div>
				
				<div style="clear:both"></div>
			</div>
			

<script type="text/javascript">
var i=0;//current img
var arrImg=new Array();
var arrTitle=new Array();
var arrImgLink=new Array();
<?php foreach($images as $k=>$v){
	echo 'arrImg['.$k.']="'.$this->webroot.'uploaded/Image/large/'.$v['Image']['image'].'";';
	echo 'arrImgLink['.$k.']="'.$this->Seo->link('/images/detail/'.$v['Image']['id']).'";';
	//echo 'arrTitle['.$k.']="'.$v['Image']['cattitle'].'";';
	echo 'arrTitle['.$k.']="<a href=\''.$this->Seo->link('/images/index/'.$v['Image']['image_category_id']).'\'>'.$v['Image']['cattitle'].'</a>";';
	}
?>

i=arrImg.length;//get last one
var bannerImageWidth=970;
var bannerImageHeight=492;
var timetofade=1000;
var timetochangeimage=6000;
var timer;


window.onload=init;
function init(){
	timer=setInterval(nextImage,timetochangeimage);
	nextImage();
	
   //btn
	$("#btn_left").click(function() {
		prevImage();
	});
	$("#btn_right").click(function() {
		nextImage();
	});
	$("#image_detail_link").click(function() {
		  window.location=arrImgLink[i];
		});
   
}

	function prevImage(){
		moveImage(1);
	}
	function nextImage(){
		moveImage(0);
	}
	function moveImage(back){	
		clearInterval(timer);
		//disable button
		$("#btn_right").css("display","none");
		$("#btn_left").css("display","none");
		if(back==1){if(--i<0)i=arrImg.length-1;}
		else{if(++i>=arrImg.length)i=0;}
			
		newImg=document.createElement("img");	
		newImg.className="img";
		newImg.style.display='none';//('display:none');
		newImg.onload = function () {
			var newSize = new resizeImage(newImg.width,newImg.height,bannerImageWidth,bannerImageHeight);
			
			newImg.width=newSize.width;
			newImg.height=newSize.height;
			newImg.style.marginLeft=((bannerImageWidth-newSize.width)/2+27)+"px";
			newImg.style.marginTop=((bannerImageHeight-newSize.height)/2+7)+"px";
			newImg.style.position="absolute";
			newImg.style.cursor="pointer";

			//newImg.setAttributeNode('style','display:block');
			$('#image_frame').before(newImg);
			$('.img').last().fadeIn(timetofade,function(){getNextImage();});
			$('.img').first().fadeOut(timetofade);
			$("#image_frame_title").fadeOut(function() {
				  $(this).html(arrTitle[i]);
				  $(this).fadeIn();
				});
			
		};

		
		newImg.src=arrImg[i];
   }
   function getNextImage(){
	   $('.img').first().remove();
	//enable button
	$("#btn_right").css("display","block");
	$("#btn_left").css("display","block");
	timer=setInterval(nextImage,timetochangeimage);
   }   
   
   



</script>